<template>
  <el-container>
    <el-header>
      <div class="left-panel">
        <el-button type="primary" icon="el-icon-plus"></el-button>
        <el-button type="danger" plain icon="el-icon-delete"></el-button>
      </div>
      <div class="right-panel">
        <el-alert title="请在右下角第二个按钮体验自定义列" type="warning" :closable="false" />
      </div>
    </el-header>
    <el-main class="nopadding">
      <scTable ref="table" tableName="listCustomColumn" :apiObj="list.apiObj" :column="list.column" row-key="id" stripe>
        <el-table-column type="selection" width="50"></el-table-column>
        <template #progress="scope">
          <el-progress :percentage="scope.row.progress" />
        </template>
      </scTable>
    </el-main>
  </el-container>
</template>

<script>
export default {
  name: 'tableCustomColumn',
  data() {
    return {
      list: {
        apiObj: this.$API.demo.list,
        column: [
          {
            label: '姓名',
            prop: 'name',
            width: '150',
          },
          {
            label: '性别',
            prop: 'sex',
            width: '150',
            filters: [
              { text: '男', value: '男' },
              { text: '女', value: '女' },
            ],
          },
          {
            label: '邮箱',
            prop: 'email',
            width: '250',
            hide: true,
          },
          {
            label: '评分',
            prop: 'num',
            width: '150',
            sortable: true,
          },
          {
            label: '进度',
            prop: 'progress',
            width: '250',
            sortable: true,
          },
          {
            label: '注册时间',
            prop: 'datetime',
            width: '150',
            sortable: true,
          },
        ],
      },
    }
  },
}
</script>

<style></style>
